<template>
	<view class="com_con">
		<scroll-view class="left" scroll-y >
			<view  :class="active===index?'active':''" @click="onClickHandle(index,item.menuType)" v-for="(item,index) in cateList" :key="item.id">{{item.title}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="">
			<view class="cal">
			    <uni-calendar 
			    :insert="true"
			    :lunar="true" 
			    :start-date="'2019-3-2'"
			    :end-date="'2019-5-20'"
			    @change="change"
			     />
			</view>
			<!-- 考勤信息 -->
			<view class="kaoqing_item" v-for="item in userList" :key="item.id">
				<image @click="previewImg(item.img_url)" src="../../static/icon/member-active.png" style="width: 50rpx;height: 50rpx;"></image>
				--
				{{item.name}}--{{item.status}}--{{item.content}}
			</view>
			<text v-if="userList.length === 0">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList:[],
				userList:[],
				scoreList:[],
				lifeList:[],
				active:0
			}
		},
		methods: {
			async getCommCateList(){
				const res = await this.$myRequest({
					url:"/community/getCommCateList"
				});
				console.log(res)
				this.cateList =  res.data;
				this.onClickHandle(0,this.cateList[0].menuType);
			},
			async onClickHandle(index,menuType){
				this.active = index;
				const res = await this.$myRequest({
					url:"/community/getMenuTabContent/"+menuType
				});
				this.userList = res.data;
				console.log(res)
			},
			//浏览图片
			previewImg(current){
				//浏览考勤用户信息头像
				const urls = this.userList.map(item=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls
				})
			},
			showZuoBiao(){
				  console.log('展示坐标：');
				//后的坐标
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
				    }
				})
			}
		},
		onLoad(){
			this.getCommCateList();
			this.showZuoBiao();
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.com_con{
	height: 100%;
	display: flex;
	.left{
		height: 100%;
		width: 25%;
		border-right: 1px solid #eee;
		view{
			height: 120rpx;
			line-height: 120rpx;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background: $shop-color;
			color:#FFFFFF;
		}
	}
	.right{
		height: 100%;
		width:75%;
		margin: 0 auto;
		padding:10rpx;
	
	}
	
}

</style>
